<!-- 订单基础信息 -->
<template>
  <div v-if="orderData">
    <p v-if="orderData.orderTypeCode != 'MallOrder'" align="center" class="title">{{ orderData.name }}</p>
    <el-divider content-position="left"><span class="divider_title">订单基本信息</span></el-divider>
    <el-row>
      <el-col class="text" :span="7"><span class="text_color">订单编号：</span>{{ orderData.orderNo }}</el-col>
      <el-col class="text" :span="4">
        <span class="text_color">订单类型：</span>
        <span v-if="orderData.orderTypeCode">
          <template v-for="ktem in dict.orderType">
            {{ ktem.code === orderData.orderTypeCode ? ktem.value : '' }}
          </template>
        </span>
      </el-col>
      <el-col class="text" :span="6"><span class="text_color">下单时间：</span>{{ orderData.orderDateTime | FormatDate('yyyy-MM-dd HH:mm:ss') }}</el-col>
    </el-row>
    <el-row>
      <el-col class="text" :span="7">
        <div style="display: inline-block;">
          <span class="text_color">支付渠道：</span>
          <span v-if="orderData.isOnlinePayment">线上</span>
          <span v-else>线下</span>
        </div>
        <div style="display: inline-block;" class="gl_ml_30">
          <span class="text_color">支付方式：</span>
          <span v-if="orderData.channelTypeCode">
            <template v-for="ktem in dict.channelType">
              {{ ktem.code === orderData.channelTypeCode ? ktem.value : '' }}
            </template>
          </span>
        </div>
      </el-col>
      <el-col class="text" :span="4">
        <span class="text_color">订单状态：</span>
        <span v-if="orderData.orderStatusCode">
          <template v-for="ktem in dict.orderStatus">
            {{ ktem.code === orderData.orderStatusCode ? ktem.value: '' }}
          </template>
        </span>
      </el-col>
    </el-row>
    <el-row v-if="isShowCreator">
      <el-col class="text" :span="7">
        <span class="text_color">下单账号：</span>
        <span>{{ orderData.orderAccount || (orderData.creatorMobile ? orderData.creatorMobile : '- -') }}</span>
      </el-col>
      <el-col class="text" :span="4">
        <span class="text_color">付款人：</span>
        <span>{{ orderData.creatorName ? orderData.creatorName : '- -' }}</span>
      </el-col>
      <el-col class="text" :span="8">
        <span class="text_color">付款机构：</span>
        <span>{{ orderData.delegationName ? orderData.delegationName : '- -' }}</span>
      </el-col>
    </el-row>
    <el-row>
      <el-col class="text money_color" :span="7"><span class="text_color">商品金额：</span>{{ formatMoney(totalAmount) }} 元</el-col>
      <el-col class="text money_color" :span="7"><span class="text_color">应付款金额：</span>{{ formatMoney(payAmount) }} 元</el-col>
    </el-row>

    <div v-if="fudetail">
      <el-divider content-position="left"><span class="divider_title">{{ orderData.orderTypeCode === 'InsuranceOrder'?'关联赛事订单':'关联保险订单' }}</span></el-divider>
      <el-row>
      <el-col class="text" :span="7"><span class="text_color">订单编号：</span>{{ fudetail.orderNo }}</el-col>
      <el-col class="text" :span="4">
        <span class="text_color">订单类型：</span>
        <span v-if="fudetail.orderTypeCode">
          <template v-for="ktem in dict.orderType">
            {{ ktem.code === fudetail.orderTypeCode ? ktem.value : '' }}
          </template>
        </span>
      </el-col>
      <el-col class="text" :span="6"><span class="text_color">下单时间：</span>{{ fudetail.orderDateTime | FormatDate('yyyy-MM-dd HH:mm:ss') }}</el-col>
      </el-row>
      <el-row>
        <el-col class="text" :span="7">
          <div style="display: inline-block;">
            <span class="text_color">支付渠道：</span>
            <span v-if="fudetail.isOnlinePayment">线上</span>
            <span v-else>线下</span>
          </div>
          <div style="display: inline-block;" class="gl_ml_30">
            <span class="text_color">支付方式：</span>
            <span v-if="fudetail.channelTypeCode">
              <template v-for="ktem in dict.channelType">
                {{ ktem.code === fudetail.channelTypeCode ? ktem.value : '' }}
              </template>
            </span>
          </div>
        </el-col>
        <el-col class="text" :span="4">
          <span class="text_color">订单状态：</span>
          <span v-if="fudetail.orderStatusCode">
            <template v-for="ktem in dict.orderStatus">
              {{ ktem.code === fudetail.orderStatusCode ? ktem.value: '' }}
            </template>
          </span>
        </el-col>
      </el-row>
      <!-- <el-row v-if="isShowCreator">
        <el-col class="text" :span="7">
          <span class="text_color">下单账号：</span>
          <span>{{ fudetail.orderAccount || (fudetail.creatorMobile ? fudetail.creatorMobile : '- -') }}</span>
        </el-col>
        <el-col class="text" :span="4">
          <span class="text_color">付款人：</span>
          <span>{{ fudetail.creatorName ? fudetail.creatorName : '- -' }}</span>
        </el-col>
        <el-col class="text" :span="8">
          <span class="text_color">付款机构：</span>
          <span>{{ fudetail.delegationName ? fudetail.delegationName : '- -' }}</span>
        </el-col>
      </el-row> -->
      <el-row>
        <!-- <el-col class="text money_color" :span="7"><span class="text_color">报名人数：</span>{{ fudetail.delegationName }} 元</el-col> -->
        <el-col class="text money_color" :span="7"><span class="text_color">订单金额：</span>{{ formatMoney(fudetail.payPrice) }} 元</el-col>
      </el-row>
    </div>

    <div v-if="!orderData.isOnlinePayment">
      <el-divider content-position="left"><span class="divider_title">收款方</span></el-divider>
      <el-row type="flex" justify="space-between">
        <el-col :span="21" class="text"><span class="text_color">收款账户：</span>{{ orderData.offlineBeneficiarysName ? orderData.offlineBeneficiarysName : '- -' }}</el-col>
        <el-col :span="3"><el-button v-if="!isShowCreator && offlineData.busCollectionCodeList && offlineData.busCollectionCodeList.length > 0" type="text" style="margin-top: -12px;" @click="showOfflinePayInfo">点此查看付款码</el-button></el-col>
      </el-row>
      <el-row>
        <el-col class="text"><span class="text_color">开户银行：</span>{{ orderData.offlineAccountsWithBank ? orderData.offlineAccountsWithBank : '- -' }}</el-col>
      </el-row>
      <el-row>
        <el-col class="text"><span class="text_color">开户账号：</span>{{ orderData.offlineAccountNumber ? orderData.offlineAccountNumber : '- -' }}</el-col>
      </el-row>
    </div>
    <el-dialog class="gl_dialog_TitleLine" :close-on-click-modal="false" title="线下收款支付码" :visible.sync="offlineDialogVisible" width="640px">
      <offline-pay-info :offline-data="offlineData" :is-show-text="false" />
    </el-dialog>
    <div v-if="orderData.orderTypeCode == 'MallOrder'">
      <el-divider content-position="left"><span class="divider_title">收货信息</span></el-divider>
      <el-row>
        <el-col class="text"><span class="text_color">收货人：</span>{{ detail.ConsigneeName ? detail.ConsigneeName : '- -' }}</el-col>
      </el-row>
      <el-row>
        <el-col class="text"><span class="text_color">手机号：</span>{{ detail.PhoneNumber ? detail.PhoneNumber : '- -' }}</el-col>
      </el-row>
      <el-row>
        <el-col class="text"><span class="text_color">收货地址：</span>{{ detail.Address ? detail.Address : '- -' }}</el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import {
  api_GET_TradeOrderDetails
} from '@/extend/api/swaggerApi/app.js';
import OfflinePayInfo from '@/components/OfflinePayInfo';
export default {
  name: 'Info',
  components: {
    OfflinePayInfo
  },
  props: {
    isShowCreator: {
      type: Boolean,
      default: true
    },
    orderData: {
      type: Object,
      default: () => {
        return {};
      }
    },
    offlineData: {
      type: Object,
      default: () => {
        return {};
      }
    },
    detail: {
      type: Object,
      default: () => {}
    },
    totalAmount: {
      type: Number,
      default: 0
    },
    payAmount: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      offlineDialogVisible: false,
      fudetail: null
    };
  },
  watch: {
    orderData: {
      handler(newValue) {
        this.getdetail();
      },
      immediate: true,
    }
  },
  computed: {
    ...mapState({
      dict: state => state.dict.dict
    })
  },
  created() {
    this.getDict();
  },
  mounted() {
    // this.getdetail();
  },
  methods: {
    ...mapActions({ getDict: 'dict/getDict' }),
    getdetail () {
      if(this.orderData.parentOrderNo||this.orderData.childrenOrderNo) {
        api_GET_TradeOrderDetails({'OrderNo': this.orderData.parentOrderNo || this.orderData.childrenOrderNo}).then(res => {
          this.fudetail = res;
        })
      }
    },
    // 格式化货币格式 （分）
    formatMoney(num) {
      if (typeof num === 'number' && !Number.isNaN(num)) {
        // num 是数字类型 且不是 NaN
        let strNum = String(num); // 金额文本类型
        if (num >= 0) {
          strNum = strNum.padStart(3, '0'); // 用0填充保证最小三位数
          return strNum.slice(0, -2) + '.' + strNum.slice(-2); // 金额拼接
        } else {
          const _mark = strNum.slice(0, 1); // 负号
          const _noMark = strNum.slice(1); // 无负号数值
          strNum = _noMark.padStart(3, '0'); // 用0填充保证最小三位数
          return _mark + strNum.slice(0, -2) + '.' + strNum.slice(-2); // 金额拼接
        }
      } else {
        return '';
      }
    },
    // 查看支付码
    showOfflinePayInfo() {
      this.offlineDialogVisible = true;
    }
  }
};
</script>

<style scoped>
.title {
  font-size: 20px;
  color: #353434;
  font-weight: bold;
  line-height: 22px;
}
.divider_title {
  font-size: 16px;
  color: #353434;
  font-weight: bold;
  line-height: 20px;
}
.text {
  font-size: 14px;
  color: #353434;
  font-weight: 400;
  line-height: 22px;
  margin-bottom: 12px;
}
.text_color {
  color: #939393;
}
.money_color {
  color: #f56c6c;
}
</style>
